<template>
  <div id="container" :data="data">
    <chartTitle :title="title"></chartTitle>
    <div class="main" :id="id">

    </div>
    <!-- <div class="around-center"></div> -->
    <!-- <div class="around-line"></div> -->
    <!-- <div class="around-out"></div> -->
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import autoSize from '../../uitils/auto-font-size.js'
  import chartTitle from '../chart-title/index.vue'
  export default {
    components: {
      chartTitle
    },
    name: 'chart-rose-line',
    props: {
      title: String,
      shadow: {
        type: Boolean,
        default: true
      },
      color: {
        type: Array,
        default: () => {
          return ['#00CBFF', '#D33C36', '#FF6600', '#F4CD28', '#00B67C', '#A3D804']
        }
      },
      data: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data() {
      return {
        minAngle: 42,
        center: ['28%', '45%'],
        myChart: null
      }
    },
    computed: {
      id: function() {
        return `main-${Math.random()}`
      },
      dataMap: function() {
        let obj = {}
        this.data.map((item, index) => {
          obj[item.name] = {
            dataIndex: index,
            name: item.name,
            ratio: item.ratio,
            value: item.value
          }
        })

        return obj
      }
    },
    mounted() {
      setTimeout(() => {
        this.onInit()
      }, 3500)
    },
    updated() {
      setTimeout(() => {
        this.onInit()
      }, 1000)
    },
    methods: {
      onInit() {
        var chartDom = document.getElementById(this.id);
        var myChart = echarts.init(chartDom);
        var option;
        
        // this.data.map(item => {
        //   if(item.value < 5) {
        //     item.value = 5
        //   }
        // })
        
        
        option = {
          animationDuration: 4000,
          animationDurationUpdate: 2000,
          tooltip: {
            show: true,
            formatter: (params) => {
              const {
                data,
                dataIndex
              } = params
              let color = ''
              if (dataIndex < this.color.length) {
                color = this.color[dataIndex]
              } else {
                
                color = this.color[dataIndex % this.color.length]
              }

              const icon =
                `<span style="display: inline-block;width:10px;height: 10px;background-color: ${color};border-radius: 50%;margin-right: 5px"></span>`
              const name = `<span style="color: ${color};">${data.name}</span>`
              const ratio = ` / ${data.ratio || '0%'}`
              return icon + name + ratio
            }
          },
          color: this.color,
          legend: {
            show: true,
            type: 'scroll',
            orient: 'vertical',
            selectedMode: false,
            top: 'center',
            left: '52%',
            itemGap: autoSize(26),
            stillShowZeroSum: false,
            pageTextStyle: {
              color: '#fff'
            },
            textStyle: {
              fontSize: autoSize(14),
              // color: '#',
              rich: {
                a: {
                  fontSize: autoSize(14),
                  color: '#',
                },
                value: {
                  fontSize: autoSize(14),
                  color: '#fff'
                }
              },
            },
            formatter: params => {
              const {
                name,
                value,
                ratio,
                dataIndex
              } = this.dataMap[params]
              // return `{a|${params}}{value| / ${ratio || 0}%}`
              return `{a|${params}}{value| / ${ratio || '0%'}}`
            },
            // padding: [0, -130, 30, -110],

            itemWidth: 13,
            itemHeight: 13,
            icon: 'roundRect',
            data: this.data
          },
          series: [
            // 主要展示层的
            {
              type: 'pie',
              radius: ['21%', '65%'],
              center: this.center,
              label: {
                show: false,
              },
              z: 5,
              roseType: true,
              data: this.data
            },
            // 边框的设置
            {
              type: 'pie',
              radius: ['21%', '60%'],
              center: this.center,
              label: {
                show: false,
              },
              itemStyle: {
                color: 'rgba(0, 0, 0, .2)',
              },
              z: 6,
              roseType: true,
              data: this.data
            },
            // 圆心
            // 圆心
            {
              radius: ['0', '12%'],
              center: this.center,
              type: 'pie',
              color: '#C2D7FD',
              minAngle: 30,
              emphasis: {
                scale: false
              },
              label: {
                show: false
              },
              hoverAnimation: false,
              tooltip: {
                show: false
              },
              z: 5,
              itemStyle: {
                shadowColor: '#000',
                shadowBlur: 30
              },
              data: [{
                value: 0
              }],
            },
            // // 圆心外圈
            {
              radius: ['20%', '19%'],
              center: this.center,
              type: 'pie',
              color: '#C2D7FD',
              minAngle: 30,
              emphasis: {
                scale: false
              },
              label: {
                show: false
              },
              hoverAnimation: false,
              tooltip: {
                show: false
              },
              itemStyle: {
                shadowColor: '#000',
                shadowBlur: 10
              },
              z: 5,
              data: [{
                value: 0
              }],
            },
            // 外圈
            {
              radius: ['70%', '69%'],
              center: this.center,
              type: 'pie',
              minAngle: 30,
              emphasis: {
                scale: false
              },
              label: {
                show: false
              },
              hoverAnimation: false,
              tooltip: {
                show: false
              },
              itemStyle: {
                color: '#00CBFF',
                shadowColor: '#000',
                shadowBlur: 10
              },
              z: 5,
              data: [{
                value: 0
              }],
            },
          ]
        };

        myChart.setOption(option, true)
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  @keyframes lineMove{
     0%{width: 0;}
     100%{width: 90%;}
  }

  #container {
    width: 100%;
    height: 27.4vh;
    color: #fff;
    background-color: rgba(7, 38, 46, .2);
    border: 1px solid rgba(194, 215, 253, .2);
    display: flex;
    flex-flow: column;

    .main {
      flex: 1;
    }
  }
</style>
